<template>
  <div class="lum-dialog-mask animated fadeIn">

    
    <el-container style="padding-bottom:10px"  v-loading="loading" class="lum-dialog-box">
      <el-header class="header no-select" height="60px">
        <p>商品列表</p>
        <p class="tools">
          <el-icon @click="close()"><ele-Close /></el-icon>
        </p>
      </el-header>
      <el-main class="main no-padding vote-from">
        <el-row :gutter="20">
          <el-col v-for="(item,index) in shopData" :key="index" :span="12">
            <div class="shop_box">
              <div class="imge">
                <img :src="item.skuImg" alt="" />
              </div>
              <div class="price">
                <s style="font-size:12px;color:#666;margin-right:10px">原价 ￥{{ item.skuPrice }}</s> <strong> <em>Vip</em>￥{{item.vipPrice }}   </strong>
              </div>
              <div class="title">
                {{ item.skuTitle }}
              </div>
              <div class="send_shop">
                <el-button @click="submitSendMesage(item)" type="primary" size="small">发送商品</el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="12"> </el-col>
        </el-row>
        <div class="loadingMore">
          <el-button v-if="showBtn" @click="moreClick" >加载更多</el-button>
        </div>
      </el-main>
      
    </el-container>
  </div>
</template>

<script>
import { computed,ref, reactive, toRefs, onMounted,nextTick } from "vue";
import { ElNotification,ElLoading  } from "element-plus";
import { useDialogueInfo } from "/@/stores/chat/dialogue";
import { useChatApi } from "/@/api/chat/index";

export default {
  name: "MeEditorShopList",
  props: {
    group_id: {
      type: [String, Number],
      default: 0,
    },
    params_listChildren: {
            type: Object,
            default() {
                return {
                    talk_source: 0,  // 消息类型 (1: 17聊 2: 商城咨询客服)
                }
            }
        },
  },
  setup(props, context) {
    const { group_id,params_listChildren } = toRefs(props);
    const dialogueInfo = useDialogueInfo();
    const chatApi = useChatApi();
    const loading = ref(true)
    const state = reactive({
      idx:'',
      loading: false,
      anonymous: 0,
      mode: 0,
      title: "",
      options: [
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
      ],
      page: 0,
      shopData: [],
      loadingInstance:{},
      idx:0,
      showBtn:true
    });
    // 获取商品信息
    // 上传图片到服务器

    // 加载群信息
    const loadGroupDetail = () => {
      state.isEditRemark = false;
      chatApi
        .ServeGroupDetail({
          group_id: group_id.value,
        })
        .then((res) => {
          if (res.code == 0) {
            let result = res.data;
            state.page = state.page + 1;
            state.idx = result.shop_id;
            getShop(result);
          }
        });
    };
    const getShop = () => {
      chatApi
        .pmsSpuCommentpageList({
          storeId:  state.idx,
          pageNum: state.page,
          size: 1000,
        })
        .then((res) => {
          if (res.code == 0) {
            if(state.shopData.length===0){
              const data = res.data.products;
              state.shopData = data;
            }else{
              state.shopData = state.shopData.concat(res.data.products)

            }
            loading.value = false
            if(res.data.products.length<10){
              state.showBtn = false
            }
          } else {
          }
        })
        .catch(() => {
          ElMessage.error("接口错误");
        });
    };
          // 发送商品链接
          const submitSendMesage = (content) => {

            let order ={
              skuInfos:{
                skuId:content.skuId,
                skuTitle:content.skuTitle,
                skuImage:content.skuImg,
                price:content.skuPrice,
                vipPrice:content.vipPrice,
              }
            }
            chatApi.skuInfo({
              skuInfo:order.skuInfos,
              receiver_id: parseInt(params_listChildren.value.receiver_id),
              talk_type: parseInt(params_listChildren.value.talk_type),
              talkSource: params_listChildren.value.talk_source
            }).then(() => {
              context.emit("close");
                // chatTalk.UPDATE_TALK_ITEM({
                //     index_name: index_name.value,
                //     draft_text: '',
                // })
            })
        }
    const close = () => {
      context.emit("close");
    };
    const moreClick = () => {
      state.page =  state.page + 1
      getShop()
    }
    onMounted(() => {
      // loadGroupDetail();
      getShop()
    });

    return {
      ...toRefs(state),
      close,
      loading,
      moreClick,
      submitSendMesage
    };
  },
};
</script>

<style lang="scss" scoped>

.lum-dialog-box {
  height: 600px;
  max-width: 450px;

  .vote-from {
    box-sizing: border-box;
    padding: 15px 25px;
    // overflow: hidden;

    .vote-title {
      margin: 20px 0 10px;
      &:first-child {
        margin-top: 0;
      }
    }

    .vote-options {
      display: flex;
      min-height: 30px;
      margin: 10px 0;

      .lbox {
        width: 100%;

        :deep(.el-input__prefix) {
          height: 36px;
          line-height: 36px;
        }
      }

      .rbox {
        flex-basis: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 18px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
    }

    .add-option {
      margin-top: 5px;
      font-weight: 400;
      color: var(--el-color-primary);
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 32px;
    border-top: 1px solid #f5eeee;
  }
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #606266;
}
:deep(.el-radio-group) {
  margin-top: -5px;
}
.shop_box {
  width: 100%;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
  position: relative;
  .imge {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .price {
    box-sizing: border-box;
    padding: 5px;
    color: #e4393c;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    em {
      font-size: 16px;
    }
  }
  .title {
    box-sizing: border-box;
    padding: 0 5px 5px 5px;
    height: 38px;
    width: 100%;
    word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;
  color: #666;
  line-height: 18px;
  }
}
.shop_box:hover .send_shop{
  display: flex;
}
.el-col {
  margin-bottom: 15px;

}
.loadingMore{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.send_shop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

</style>
